<template>
  <view class="second">
    <view class="top">
      <view class="top-box">
        <uv-input
          placeholder="请输入您要搜索的内容"
          prefixIcon="search"
          shape="circle"
        >
          <template v-slot:prefix>
            <uv-text
              margin="0 20px 0 0"
              prefixIcon="arrow-down-fill"
              text="临沂"
            ></uv-text>
          </template>
        </uv-input>

        <view class="icon">
          <view class="icon1">
            <uv-icon name="file-text" color="#fff" size="30"></uv-icon>
            <view class="font">发布</view>
          </view>
          <view class="icon2">
            <uv-icon name="star" color="#fff" size="30"></uv-icon>
            <view class="font">收藏</view>
          </view>
          <view class="icon3">
            <uv-icon name="clock" color="#fff" size="30"></uv-icon>
            <view class="font">历史记录</view>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <uv-tabs
        :list="list"
        lineWidth="20"
        lineColor="#FC4424"
        :activeStyle="{
          color: '#000',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        itemStyle=" height: 40px;width:16%;"
      ></uv-tabs>
      <view class="content-box">
        <view class="good-box">
          <view class="good" v-for="(item, index) in goods" :key="index" @click="details">
            <view class="good-top">
              <image :src="item.src" ></image>
            </view>
            <view class="good-bottom">
              <view class="b1">{{ item.g1 }}</view>
              <view class="b2">
                <view>{{ item.g2 }}</view>
                <view>{{ item.g3 }}</view>
              </view>
              <view class="b3">
                <view>{{ item.g4 }}</view>
                <view>
                  <image :src="item.src2" ></image>
                  {{ item.g5 }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "猜你喜欢",
        },
        {
          name: "新发",
        },
        {
          name: "手机",
        },
        {
          name: "电动车",
        },
        {
          name: "汽车",
        },
        {
          name: "电脑",
        },
      ],
      goods: [
        {
          g1: "美孚(Mobil)金装美孚1号 0W-30 全合成机...",
          g2: "全新",
          g3: "充电器插头",
          g4: "7人想要",
          g5: "12",
          src: "../../static/secondgoods.jpg",
          src2: "../../static/信息.png",
        },
        {
          g1: "美孚(Mobil)金装美孚1号 0W-30 全合成机...",
          g2: "全新",
          g3: "充电器插头",
          g4: "7人想要",
          g5: "12",
          src: "../../static/secondgoods.jpg",
          src2: "../../static/信息.png",
        },
        {
          g1: "美孚(Mobil)金装美孚1号 0W-30 全合成机...",
          g2: "全新",
          g3: "充电器插头",
          g4: "7人想要",
          g5: "12",
          src: "../../static/secondgoods.jpg",
          src2: "../../static/信息.png",
        },
        {
          g1: "美孚(Mobil)金装美孚1号 0W-30 全合成机...",
          g2: "全新",
          g3: "充电器插头",
          g4: "7人想要",
          g5: "12",
          src: "../../static/secondgoods.jpg",
          src2: "../../static/信息.png",
        },
        {
          g1: "美孚(Mobil)金装美孚1号 0W-30 全合成机...",
          g2: "全新",
          g3: "充电器插头",
          g4: "7人想要",
          g5: "12",
          src: "../../static/secondgoods.jpg",
          src2: "../../static/信息.png",
        },
        {
          g1: "美孚(Mobil)金装美孚1号 0W-30 全合成机...",
          g2: "全新",
          g3: "充电器插头",
          g4: "7人想要",
          g5: "12",
          src: "../../static/secondgoods.jpg",
          src2: "../../static/信息.png",
        },
      ],
    };
  },
  methods: {
    details(){
      uni.navigateTo({
         url: '/pages/Secondgoodsdetail/Secondgoodsdetail'
      });
    }
  },
};
</script>

<style lang="scss">
.second {
  .top {
    background-image: linear-gradient(#fc4424, #f6e2df);
    height: 180px;
    .top-box {
      width: 90%;
      margin: auto;
      .uv-input {
        background-color: #fff;
      }
      .icon {
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        height: 80px;
        margin-top: 15px;
        padding: 20px 30px 20px 30px;
        .uv-icon {
          border-radius: 15px;
          padding: 10px;
        }
        .font {
          margin-top: 10px;
          font-size: 12.5px;
        }
        .icon1 {
          width: 18%;
          text-align: center;
          .uv-icon {
            background-color: #fcb162;
          }
        }
        .icon2 {
          width: 18%;
          text-align: center;
          .uv-icon {
            background-color: #6bdce2;
          }
        }
        .icon3 {
          width: 18%;
          text-align: center;
          .uv-icon {
            background-color: #927bf8;
          }
        }
      }
    }
  }
  .content {
    background-color: #f5f5f5;
    .content-box {
      padding-top: 20px;
      width: 90%;
      margin: auto;
      .good-box{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .good {
        margin-bottom:10px;
        background-color: #fff;
        width: 48%;
        border-radius: 10px;
        .good-top {
          image {
            width: 100%;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
          }
        }
        .good-bottom {
          padding: 5px;
          .b1 {
            font-size: 15px;
          }
          .b2 {
            margin-top: 8px;
            font-size: 12px;
            display: flex;
            color: #fc6a51;
            view {
              border: 1px solid #f75c40;
              margin-right: 8px;
              border-radius: 5px;
            }
          }
          .b3 {
            margin-top: 10px;
            color: #aaaaaa;
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            line-height: 16px;
            image {
              width: 16px;
              height: 20px;
            }
          }
        }
      }
      }
    }
  }
}
</style>
